@()(implicit session: Session)

@config.main("  QTLs") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("  QTLs")

            <div class="main-body">
                <form class="registration-form col-sm-12 my-form" id="form">



                    @components.chr()

                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title">Start Position:</label>
                        <div class="col-sm-5" style="text-align: left">
                            <input class="form-control" name="start" id="start">
                        </div>
                        <div class="col-sm-4" style="line-height: 40px">
                            <span >
                                e.g.,&nbsp;<a href="#" onclick="getStart()"><em class="egCrics">1</em></a></span>
                        </div>

                    </div>

                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title">End Position:</label>
                        <div class="col-sm-5" style="text-align: left">
                            <input class="form-control" name="end" id="end">
                        </div>
                        <div class="col-sm-4" style="line-height: 40px">
                            <span  >
                                e.g.,&nbsp;<a href="#" onclick="getEnd()"><em class="egCrics">1000000</em></a></span>
                        </div>
                    </div>

                    @components.button("")
                </form>

                <div id="result" class="result">
                    <hr/>

                    <h5>Result:</h5>

                    @components.tableComponent("qtlTable")

                </div>
            </div>
        </div>
    </div>

    <script>

            $(function () {

                getChr()
                formValidation()

                let h = "Snp\tSnpChr\tSnpPos\tGene\tGeneChr\tGeneStart\tGeneEnd\tDist\tCisTrans\tBeta\tt-stat\tP\tFDR"
                let h2 = h.split("\t")
                let header = {}
                $.each(h2,(i,v)=>{
                    header[`${i}`] = {"title": v, "search": {"types": "text"}}
                })

                let columns = getTableColumns(header,"qtlTable")
                $("#qtlTable").bootstrapTable({columns:columns})

            })

            function getStart() {
                $("#start").val("1")
            }

            function getEnd() {
                $("#end").val("1000000")
            }

            function getChr() {

                $.post("/COADB/search/getChr?species=CON", (data) => {
                    $("#chr").empty().select2({data:data})
                })
            }

            function Search() {
                let form = $("#form")
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();
                    $.ajax({
                        url: "@routes.QtlController.getQtlResult" ,
                        type: "post",
                        data: form.serialize(),
                        success: (data) => {
                            layer.close(index)
                            if(data.valid === "false"){
                                swal("Error","There is no QTL information in this interval!","error")
                            }else {

                                $("#qtlTable").bootstrapTable("load", data.qtl);
                                let $result = $("#result")
                                $result.show();
                                let target_top = $result.offset().top ;
                                $("html,body").animate({scrollTop: target_top}, 800);
                            }
                        }
                    })
                }
            }

            function formValidation() {

                let integer = {
                    validators: {
                        notEmpty: {
                            message: 'Word size is required！'
                        },
                        integer: {
                            message: 'Word size must be intger！'
                        }
                    }
                }

                $('#form').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        start: integer,
                        end: integer
                    }
                });

            }

    </script>

}